<template>
  <div style="margin-top: 32px;">
    <Title title="残次品出入库记录" font-size="16px" style="margin-bottom: 10px;"/>
    <div v-if="operateLogs && operateLogs.length">
      <log-time-line :logs="logList" :edit-api="handleEdit" @success="queryOperateLogs" />
      <div v-if="logsNum > 3" class="log-open-btn" @click="switchOpen">
        {{ logOpen?'收起':'展开' }}全部记录<i :class="logOpen?'el-icon-arrow-up':'el-icon-arrow-down'"/>
      </div>
    </div>
    <div v-else class="empty-container">
      <img :src="emptyImg" alt="">
      <div class="empty-text">暂无操作日志</div>
    </div>
  </div>
</template>
<script>
import { getDefectiveStockOutLog, storeDefectiveStockOutRemarks } from '@/api/mengli';
import Title from '@/components/Title';
import emptyImg from '@/assets/empty-table-data.png';
import LogTimeLine from '@/components/Common/logTimeLine';

export default {
  components: { Title, LogTimeLine },
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      emptyImg,
      logsNum: 0,
      logOpen: false,
      operateLogs: [],
      miniLogs: []
    };
  },
  computed: {
    logList() {
      return (this.logOpen || this.logsNum <= 3) ? this.operateLogs : this.miniLogs;
    }
  },
  created() {
    this.queryOperateLogs();
  },
  methods: {
    // 操作日志
    queryOperateLogs() {
      getDefectiveStockOutLog(this.id).then(res => {
        if (res.code === 200) {
          // 接口数据字段名称不一致，需要做转换
          let logsNum = 0;
          res.data.forEach(i => {
            i.operations = i.items || [];
            i.operationTime = new Date(i.operationTime).getTime();
            delete i.items;
            logsNum += i.operations.length;
            i.operations.forEach(subItem => {
              subItem.remarks = subItem.remark;
            });
          });
          this.operateLogs = res.data;
          const totalLogs = _.cloneDeep(res.data);
          this.logsNum = logsNum;
          if (logsNum > 3) {
            // 获取折叠后的数据
            const miniLogItem = [];
            for (let i = 0; i < totalLogs.length; i++) {
              if (miniLogItem.length >= 3) break;
              for (let j = 0; j < totalLogs[i].operations.length; j++) {
                totalLogs[i].operations[j].operationTime = totalLogs[i].operationTime;
                miniLogItem.push(totalLogs[i].operations[j]);
                if (miniLogItem.length >= 3) break;
              }
            }
            const miniLogs = [];
            miniLogItem.forEach(i => {
              const a = miniLogs.find(j => j.operationTime === i.operationTime);
              if (a) {
                a.operations.push(i);
              } else {
                miniLogs.push({
                  operationTime: i.operationTime,
                  operations: [i]
                });
              }
            });
            this.miniLogs = miniLogs;
          }
        }
      });
    },
    handleEdit(data) {
      return new Promise((resolve, reject) => {
        if (data.remark && data.remark.length > 500) {
          this.$message({ type: 'warning', message: '请输入小于500个字的备注' });
          reject();
        } else {
          storeDefectiveStockOutRemarks(data).then(res => {
            resolve(res);
          });
        }
      });
    },
    switchOpen() {
      this.logOpen = !this.logOpen;
    },
    // 获取指定时间0点
    getStartTime(time) {
      const nowTimeDate = new Date(time);
      return nowTimeDate.setHours(0, 0, 0, 0);
    }
  }
};
</script>
<style lang="scss" scoped>
.log-open-btn {
  display:flex;
  justify-content:center;
  color: #333333;
  font-size:14px;
  cursor: pointer;
  align-items: center;
  margin-top: 10px;
  user-select: none;
  i {
    margin-left: 8px;
  }
}
.empty-container {
  text-align: center;
  position: relative;
  margin-top: 20px;
  img {
    width: 90px;
  }
  .empty-text {
    color: #999;
    max-width: 300px;
    font-size: 14px;
    margin: 0 auto;
  }
}
</style>
